Trang web dự án năm cuối sử dụng CSS HTML5

animate.js
js /
project /

1 function onViewport(el, elClass, offset, callback) {
2   /*** Based on http://ejohn.org/blog/learning-from-twitter/ ***/
3   var didScroll = false;
4   var this_top;
5   var height;
6   var top;
7
8   if(!offset) { var offset = 0; }
9
10   $(window).scroll(function() {
11       didScroll = true;
12   });
13
14   setInterval(function() {
15     if (didScroll) {
16       didScroll = false;
17       top = $(this).scrollTop();
18
19       $(el).each(function(i){
20         this_top = $(this).offset().top - offset;
21         height = $(this).height();
22
23         // Scrolled within current section
24         if (top >= this_top && !$(this).hasClass(elClass)) {
25           $(this).addClass(elClass);
26
27           if (typeof callback == "function") callback(el);
28         }
29       });
30     }
31   }, 100);
32 }
33
34 // function isElementInViewport(el) {
35 // var rect = el.getBoundingClientRect();
36 // return (
37 // rect.top >= 0 &&
38 // rect.left >= 0 &&
39 // rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
40 // rect.right <= (window.innerWidth || document.documentElement.clientWidth)
41 // );
42 // }
43
44 // a = document.querySelectorAll(".team-contact");
45 // b = document.querySelectorAll(".team-contact-mid");
46 // for (var i = 0; i < a.length; i++) {
47 // if (isElementInViewport(a[i])) {
48 // setTimeout(1000);
49 // $('.team-contact').show();
50 // // $('.team-contact-mid').show();
51 // $('.team-contact').addClass('animated bounceInLeft');
52 // // $('.team-contact-mid').addClass('animated bounceInUp');
53 // }
54 // }
55
56 onViewport("#contact", "active", 400, function() {
57   $('.team-contact').show();
58   $('.team-contact-mid').show();
59   $('.team-contact').addClass('animated bounceInLeft');
60   $('.team-contact-mid').addClass('animated bounceInUp');
61   });